<!-- 1.面板头部-->
<section class="ti3-date-picker-header" *ngIf="!selectTime">
  <!-- 1.1左按钮-->
  <section class="ti3-date-picker-icons-prev">
    <!-- 按年后退 -->
    <section
      class="ti3-icon ti3-icon-left-2"
      [ngClass]="{'ti3-date-state-disabled' : isPickerYearMinValue()}"
      [id]="appendId('pre-year')"
      (click)="onPreYearClick($event)"
    ></section>
    <!-- 按月后退-->
    <section
      *ngIf="picker === 'day'"
      class="ti3-icon ti3-icon-left-1"
      [ngClass]="{'ti3-date-state-disabled' : isMinMonth}"
      [id]="appendId('pre-month')"
      (click)="onPreMonthClick($event)"
    ></section>
  </section>
  <!-- 1.2右按钮 -->
  <section class="ti3-date-picker-icons-next">
    <!-- 按月前进-->
    <section
      #next
      *ngIf="picker === 'day'"
      class="ti3-icon ti3-icon-right-1"
      [ngClass]="{'ti3-date-state-disabled' : isMaxMonth}"
      [id]="appendId('next-month')"
      (click)="onNextMonthClick($event)"
    ></section>
    <!-- 按年前进 -->
    <section
      #nextYear
      class="ti3-icon ti3-icon-right-2"
      [ngClass]="{'ti3-date-state-disabled' :isPickerYearMaxValue()}"
      [id]="appendId('next-year')"
      (click)="onNextYearClick($event)"
    ></section>
  </section>
  <!-- 1.3年月日/年月文本显示区域-->
  <section class="ti3-header-year-month-picker">
    <section
      class="ti3-date-picker-year-month"
      [ngClass]="{'ti3-date-picker-year-month-text': !isRange || picker !== 'day' && picker !== 'onlyYear' && picker !== 'onlyYearMonth' && picker !== 'quarter'}"
      [id]="appendId('head')"
    >
      <div
        [ngClass]="{'ti3-date-picker-text' : isRange && (picker === 'day' || picker === 'onlyYear' || picker === 'onlyYearMonth' || picker ==='quarter')}"
      >
        <span *ngIf="picker === 'day' && !isChinese" (click)="onHeadTextClick('month')" [id]="appendId('head_left_month')"
          >{{pickerValue.month}}
        </span>
        <span
          *ngIf="picker === 'day' || picker === 'month' || picker === 'onlyYearMonth' || picker ==='quarter'"
          (click)="onHeadTextClick('year')"
          [id]="appendId('head_left_year')"
          >{{pickerValue.year}}
        </span>
        <span *ngIf="picker === 'day' && isChinese" (click)="onHeadTextClick('month')" [id]="appendId('head_left_month')"
          >{{pickerValue.month}}</span
        >
        <span *ngIf="picker === 'onlyYear' || picker === 'year'">{{pickerValue.yearRange}}</span>
      </div>
      <div
        *ngIf="(picker === 'day' || picker === 'onlyYear' || picker === 'onlyYearMonth' || picker ==='quarter') && isRange"
        class="ti3-date-picker-endpanel-text"
      >
        <span *ngIf="picker === 'day' && !isChinese" (click)="onHeadTextClick('month')" [id]="appendId('head_right_month')"
          >{{nextPickerValue.month}}
        </span>
        <span *ngIf="picker === 'day' || picker ==='quarter'" (click)="onHeadTextClick('year')" [id]="appendId('head_right_year')"
          >{{nextPickerValue.year}}
        </span>
        <span *ngIf="picker === 'onlyYearMonth'" (click)="onHeadTextClick('year')" [id]="appendId('head_right_year')"
          >{{nextPickerValue.onlyYear}}
        </span>
        <span *ngIf="picker === 'day' && isChinese" (click)="onHeadTextClick('month')" [id]="appendId('head_right_month')"
          >{{nextPickerValue.month}}</span
        >
        <span *ngIf="picker === 'onlyYear'">{{pickerValue.endpanelYearRange}}</span>
      </div>
    </section>
  </section>
</section>

<!-- 2.日期面板-->
<section *ngIf="picker === 'day' && !selectTime" class="ti3-date-picker-container">
  <section style="float: left">
    <!-- 2.1星期：周一到周五-->
    <thead>
      <tr>
        <th *ngFor="let week of local.weekArr; index as i" class="ti3-date-week" title="{{local.weekTitleArr[i]}}">{{week}}</th>
      </tr>
    </thead>
    <!-- 2.2日期：-->
    <tbody>
      <tr *ngFor="let week of dayArr; index as i; trackBy: trackByFn" class="ti3-date-day-tr">
        <th
          *ngFor="let day of week; index as j; trackBy: trackByFn"
          [ngClass]="{'ti3-date-today-current-td': day.isToday && day.state === 'current'}"
          (click)="onDayClick(false, day, $event)"
        >
          <section
            [ngClass]="{
                            'ti3-date-current-day' : day.state === 'current',
                            'ti3-dateRange-select-day' : day.state === 'select',
                            'ti3-date-today' : day.isToday && day.state !== 'disable',
                            'ti3-date-default-day' : day.state === 'default',
                            'ti3-date-disable-day' : day.state === 'disable',
                            'ti3-date-beside-day' : day.state === 'preMonth' || day.state === 'nextMonth'}"
            [id]="appendId('day_left_' + i + '_' + j)"
          >
            {{day.value}}
          </section>
        </th>
      </tr>
    </tbody>
  </section>
  <section style="margin-left: 20px; float: right" *ngIf="isRange">
    <thead>
      <tr>
        <th *ngFor="let week of local.weekArr; index as i" class="ti3-date-week" title="{{local.weekTitleArr[i]}}">{{week}}</th>
      </tr>
    </thead>
    <!-- 2.2日期：-->
    <tbody>
      <tr *ngFor="let week of nextdayArr; index as i; trackBy: trackByFn" class="ti3-date-day-tr">
        <th
          *ngFor="let day of week; index as j; trackBy: trackByFn"
          [ngClass]="{'ti3-date-today-current-td': day.isToday && day.state === 'current'}"
          (click)="onDayClick(true, day, $event)"
        >
          <section
            [ngClass]="{
                            'ti3-date-current-day' : day.state === 'current',
                            'ti3-dateRange-select-day' : day.state === 'select',
                            'ti3-date-today' : day.isToday && day.state !== 'disable',
                            'ti3-date-default-day' : day.state === 'default',
                            'ti3-date-disable-day' : day.state === 'disable',
                            'ti3-date-beside-day' : day.state === 'preMonth' || day.state === 'nextMonth'}"
            [id]="appendId('day_right_' + i + '_' + j)"
          >
            {{day.value}}
          </section>
        </th>
      </tr>
    </tbody>
  </section>
</section>

<!-- 3.月份面板-->
<section *ngIf="picker === 'month' && !selectTime" class="ti3-date-picker-container ti3-date-picker-year">
  <section *ngFor="let monthList of monthArr; index as i" class="ti3-date-year-month-picker-container">
    <section *ngFor="let month of monthList; index as j" style="display: inline-block" (click)="onMonthClick(month, $event)">
      <section
        class="ti3-date-month"
        [ngClass]="{'ti3-date-disable-month': month.state === 'disable',
                                 'ti3-date-default-month' : month.state === 'default',
                                 'ti3-date-current-month' : month.state === 'current',
                                 'ti3-date-select-month': month.state === 'select',
                                 'ti-date-nowMonth' : month.isMonth && month.state !== 'disable'}"
        [id]="appendId('month_' + i + '_' + j)"
      >
        {{month.value}}
      </section>
    </section>
  </section>
</section>

<!-- 年月格式展示面板 -->
<section *ngIf="picker === 'onlyYearMonth' && !selectTime" class="ti3-date-picker-year-month-container">
  <section class="ti3-date-picker-container ti3-date-picker-year">
    <section *ngFor="let monthList of monthArr; index as i;" class="ti3-date-year-month-picker-container">
      <section *ngFor="let month of monthList; index as j;" style="display: inline-block" (click)="onMonthClick(month, $event, false)">
        <section
          class="ti3-date-month"
          [ngClass]="{'ti3-date-disable-month': month.state === 'disable',
                                     'ti3-date-default-month' : month.state === 'default',
                                     'ti3-date-current-month' : month.state === 'current',
                                     'ti3-date-select-month': month.state === 'select',
                                     'ti-date-nowMonth' : month.isMonth && month.state !== 'disable'}"
          [id]="appendId('month_left_' + i + '_' + j)"
        >
          {{month.value}}
        </section>
      </section>
    </section>
  </section>
  <section *ngIf="isRange" class="ti3-date-picker-container ti3-date-picker-year ti3-date-picker-right-zone">
    <section *ngFor="let monthList of endpanelMonthArr; index as i;" class="ti3-date-year-month-picker-container">
      <section *ngFor="let month of monthList; index as j;" style="display: inline-block" (click)="onMonthClick(month, $event, true)">
        <section
          class="ti3-date-month"
          [ngClass]="{'ti3-date-disable-month': month.state === 'disable',
                                     'ti3-date-default-month' : month.state === 'default',
                                     'ti3-date-current-month' : month.state === 'current',
                                     'ti3-date-select-month': month.state === 'select',
                                     'ti-date-nowMonth' : month.isMonth && month.state !== 'disable'}"
          [id]="appendId('month_right_' + i + '_' + j)"
        >
          {{month.value}}
        </section>
      </section>
    </section>
  </section>
</section>

<!-- 4.年面板 -->
<section *ngIf="picker === 'year' && !selectTime" class="ti3-date-picker-container ti3-date-picker-month">
  <section *ngFor="let yearList of yearArr; index as i;" class="ti3-date-year-month-picker-container">
    <section *ngFor="let year of yearList; index as j;" style="display: inline-block" (click)="onYearClick(year, $event)">
      <section
        class="ti3-date-year"
        [ngClass]="{'ti3-date-disable-year': year.state === 'disable',
                                 'ti3-date-default-year' : year.state === 'default',
                                 'ti3-date-preNext-year' : year.state === 'preYear' || year.state === 'nextYear',
                                 'ti3-date-current-year' : year.state === 'current',
                                 'ti3-date-select-year': year.state === 'select',
                                 'ti-date-nowYear': year.isYear && year.state !== 'disable'}"
        [id]="appendId('year_' + i + '_' + j)"
      >
        {{year.value}}
      </section>
    </section>
  </section>
</section>
<!-- 纯年份展示面板 -->
<section *ngIf="picker === 'onlyYear' && !selectTime" class="ti3-date-picker-only-year-container">
  <section class="ti3-date-picker-container ti3-date-picker-month">
    <section *ngFor="let yearList of yearArr; index as i;" class="ti3-date-year-month-picker-container">
      <section *ngFor="let year of yearList; index as j;" style="display: inline-block" (click)="onYearClick(year, $event)">
        <section
          class="ti3-date-year"
          [ngClass]="{'ti3-date-disable-year': year.state === 'disable',
                                     'ti3-date-default-year' : year.state === 'default',
                                     'ti3-date-preNext-year' : year.state === 'preYear' || year.state === 'nextYear',
                                     'ti3-date-current-year' : year.state === 'current',
                                     'ti3-date-select-year': year.state === 'select',
                                     'ti-date-nowYear': year.isYear && year.state !== 'disable'}"
          [id]="appendId('year_left_' + i + '_' + j)"
        >
          {{year.value}}
        </section>
      </section>
    </section>
  </section>
  <section *ngIf="isRange" class="ti3-date-picker-container ti3-date-picker-month ti3-date-picker-right-zone">
    <section *ngFor="let yearList of endpanelYearArr; index as i;" class="ti3-date-year-month-picker-container">
      <section *ngFor="let year of yearList; index as j;" style="display: inline-block" (click)="onYearClick(year, $event)">
        <section
          class="ti3-date-year"
          [ngClass]="{'ti3-date-disable-year': year.state === 'disable',
                                     'ti3-date-default-year' : year.state === 'default',
                                     'ti3-date-preNext-year' : year.state === 'preYear' || year.state === 'nextYear',
                                     'ti3-date-current-year' : year.state === 'current',
                                     'ti3-date-select-year': year.state === 'select',
                                     'ti-date-nowYear': year.isYear && year.state !== 'disable'}"
          [id]="appendId('year_right_' + i + '_' + j)"
        >
          {{year.value}}
        </section>
      </section>
    </section>
  </section>
</section>
<!-- 5.时间选择面板 -->
<div [hidden]="!selectTime" [ngClass]="{'ti3-time-select-panel': selectTime}">
  <div class="ti3-datepanel-time-select-container" [ngClass]="{'ti3-time-select-container-border': selectTime}">
    <div class="ti3-time-hourselect-container">
      <span class="ti3-time-select-title">{{ 'tiDatepanel.hour' | tiTranslate }}</span>
      <ti-list
        #beginHourContainer
        [options]="hourOptions"
        [(ngModel)]="beginHour"
        (select)="onSelect($event, 'beginHour')"
        (mouseleave)="onMouseleave(beginHourContainer)"
        [id]="appendId('list_beginhour')"
      ></ti-list>
    </div>
    <div class="ti3-time-minuteselect-container" [hidden]="onlyHour">
      <span class="ti3-time-select-title">{{ 'tiDatepanel.minute' | tiTranslate }}</span>
      <ti-list
        #beginMinuteContainer
        [options]="minuteOptions"
        [(ngModel)]="beginMinute"
        (select)="onSelect($event, 'beginMinute')"
        (mouseleave)="onMouseleave(beginMinuteContainer)"
        [id]="appendId('list_beginminute')"
      ></ti-list>
    </div>
    <div class="ti3-time-secondselect-container" [hidden]="onlyHour || onlyHourMinute">
      <span class="ti3-time-select-title">{{ 'tiDatepanel.second' | tiTranslate }}</span>
      <ti-list
        #beginSecondContainer
        [options]="secondOptions"
        [(ngModel)]="beginSecond"
        (select)="onSelect($event, 'beginSecond')"
        (mouseleave)="onMouseleave(beginSecondContainer)"
        [id]="appendId('list_beginsecond')"
      ></ti-list>
    </div>
  </div>
  <div
    [hidden]="!isRange"
    class="ti3-datepanel-time-select-container ti3-endtime-select-container"
    [ngClass]="{'ti3-endtime-select-none': !isRange, 'ti3-time-select-container-border': selectTime}"
  >
    <div class="ti3-time-hourselect-container">
      <span class="ti3-time-select-title">{{ 'tiDatepanel.hour' | tiTranslate }}</span>
      <ti-list
        #endHourContainer
        [options]="endHourOptions"
        [(ngModel)]="endHour"
        (select)="onSelect($event, 'endHour')"
        (mouseleave)="onMouseleave(endHourContainer)"
        [id]="appendId('list_endhour')"
      ></ti-list>
    </div>
    <div class="ti3-time-minuteselect-container" [hidden]="onlyHour">
      <span class="ti3-time-select-title">{{ 'tiDatepanel.minute' | tiTranslate }}</span>
      <ti-list
        #endMinuteContainer
        [options]="endMinuteOptions"
        [(ngModel)]="endMinute"
        (select)="onSelect($event, 'endMinute')"
        (mouseleave)="onMouseleave(endMinuteContainer)"
        [id]="appendId('list_endminute')"
      ></ti-list>
    </div>
    <div class="ti3-time-secondselect-container" [hidden]="onlyHour || onlyHourMinute">
      <span class="ti3-time-select-title">{{ 'tiDatepanel.second' | tiTranslate }}</span>
      <ti-list
        #endSecondContainer
        [options]="endSecondOptions"
        [(ngModel)]="endSecond"
        (select)="onSelect($event, 'endSecond')"
        (mouseleave)="onMouseleave(endSecondContainer)"
        [id]="appendId('list_endsecond')"
      ></ti-list>
    </div>
  </div>
</div>

<!-- 季度选择面板 -->
<section *ngIf="picker === 'quarter'" style="display: flex">
  <div class="ti3-date-picker-quarter-container" [ngStyle]="{'margin-right': isRange ? '20px' : '0px'}">
    <section *ngFor="let quarter of quartersArr, index as i" style="display: inline-block">
      <div
        class="ti3-date-quarter"
        [ngClass]="{'ti3-date-quarter-top': i === 0 || i === 1,
            'ti3-date-quarter-disable': quarter.state === 'disable',
            'ti3-date-quarter-current': quarter.state === 'current',
            'ti3-date-quarter-select': quarter.state === 'select'}"
        (click)="onQuarterClick(quarter)"
      >
        {{quarter.value}}
      </div>
    </section>
  </div>
  <div class="ti3-date-picker-quarter-container" *ngIf="isRange">
    <section *ngFor="let quarter of nextQuartersArr, index as i" style="display: inline-block">
      <div
        class="ti3-date-quarter"
        [ngClass]="{'ti3-date-quarter-top': i === 0 || i === 1,
            'ti3-date-quarter-disable': quarter.state === 'disable',
            'ti3-date-quarter-current': quarter.state === 'current',
            'ti3-date-quarter-select': quarter.state === 'select'}"
        (click)="onQuarterClick(quarter, true)"
      >
        {{quarter.value}}
      </div>
    </section>
  </div>
</section>

<!--IE浏览器兼容性问题：在IE下，所有div，部分span（设置为inline-block、block的span），table，td是交互元素，可以落焦点。
而其他浏览器，div和span默认是不可交互元素，不能落焦点。
解决方案：section标签，可以等同于div使用，IE和其他浏览器行为一致。
-->
